/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/02
 *@description  tag  component 标签组件
 */

/**
 * #item
 *
 * @type        aty-tag
 * @cn          标签
 * @menu        数据
 * @stPlugin    true
 * @stContainer false
 * @children   [aty-icon,aty-text,aty-link,aty-panel]
 */
/**
 * #extendproperty
 *
 * @name    slot
 * @cn      slot插槽
 * @options [default]
 * @type    list
 * @description  default插槽，用于默认插入一些提示信息
 */
import config from '../../../config/config.js'

// components
import Icon from '../../basic/icon/index.vue'
// prefix
const prefixCls = config.prefix + '-tag'
const initColorList = ['blue', 'green', 'red', 'yellow', 'default']
// module
const module = {
  name: config.prefix + '-tag',
  components: {
    Icon
  },
  props: {
    /**
     * #property
     *
     * @name    name
     * @cn      属性名称
     * @type    string,number
     * @description 值对应的属性名
     */
    name: {
      type: [String, Number]
    },
    /**
     * #property
     *
     * @name    closable
     * @cn      标签是否可以关闭
     * @type    boolean
     * @bind    must
     * @value   true
     * @description 标签是否可以关闭,默认是可以关闭的
     */
    closable: {
      type: Boolean,
      default: true
    },
    /**
     * #property
     *
     * @name    checkable
     * @cn      标签是否可以选择
     * @type    boolean
     * @value    false
     * @description 标签是否可以选择,默认是不可以选择的
     */
    checkable: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    checked
     * @cn      标签的选中状态
     * @type    boolean
     * @bind    must
     * @value   true
     * @description 标签的选中状态
     */
    checked: {
      type: Boolean,
      default: true
    },
    /**
     * #property
     *
     * @name    color
     * @cn      标签颜色
     * @type    list
     * @value    default
     * @options [blue, green, red, yellow, default]
     * @description 标签颜色，支持自定义 [blue, green, red, yellow, default]
     */
    color: {
      type: String,
      default: 'default'
    },

    /**
     * #property
     *
     * @name    type
     * @cn      标签的样式类型
     * @type    list
     * @options [border, dot]
     * @description 标签的样式类型，取值为 [border, dot]中的其中一个
     */
    type: {
      validator(value) {
        return Artery.isOneOf(value, ['border', 'dot'])
      }
    },
    /**
     * #property
     *
     * @name text
     * @cn 文本
     * @type text
     * @value text
     * @description 文本内容
     */
    text: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      isChecked: this.checked
    }
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-${this.color}`]: !!this.color && Artery.isOneOf(this.color, initColorList),
          [`${prefixCls}-${this.type}`]: !!this.type,
          [`${prefixCls}-closable`]: this.closable,
          [`${prefixCls}-checked`]: this.isChecked
        }
      ]
    },
    wraperStyles() {
      return Artery.isOneOf(this.color, initColorList) ? {} : {
        background: this.isChecked ? this.defaultTypeColor : 'transparent',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: ((this.type !== 'dot' && this.type !== 'border' && this.isChecked) ? this.borderColor : this.lineColor),
        color: this.lineColor
      }
    },
    textClasses() {
      return [
        `${prefixCls}-text`,
        this.type === 'border' ? (Artery.isOneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
        (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : ''
      ]
    },
    iconClass() {
      if (this.type === 'dot') {
        return ''
      } else if (this.type === 'border') {
        return Artery.isOneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : ''
      } else {
        return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''
      }
    },
    lineColor() {
      if (this.type === 'dot') {
        return ''
      } else if (this.type === 'border') {
        return this.color !== undefined ? (Artery.isOneOf(this.color, initColorList) ? '' : this.color) : ''
      } else {
        return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''
      }
    },
    borderColor() {
      return this.color !== undefined ? (this.color === 'default' ? '' : this.color) : ''
    },
    dotColor() {
      return this.color !== undefined ? (Artery.isOneOf(this.color, initColorList) ? '' : this.color) : ''
    },
    textColorStyle() {
      return Artery.isOneOf(this.color, initColorList) ? {} :
        ((this.type !== 'dot' && this.type !== 'border') ?
          (this.isChecked ? {
            color: this.lineColor
          } : {}) :
          {
            color: this.lineColor
          })
    },
    bgColorStyle() {
      return Artery.isOneOf(this.color, initColorList) ? {} : {
        background: this.dotColor
      }
    },
    defaultTypeColor() {
      return (this.type !== 'dot' && this.type !== 'border') ?
        (this.color !== undefined ? (Artery.isOneOf(this.color, initColorList) ? '' : this.color) : '') : ''
    }
  },
  methods: {
    close(event) {
      /**
       * #event
       *
       * @name    close
       * @param   event  事件对象
       * @param   name   当前传入的props中的name
       * @body
       * @description    点击关闭按钮时触发
       */
      this.$emit('close', event, this.name)
    },
    check() {
      /**
       * #event
       *
       * @name    click
       * @param   text   当前值对应文本
       * @param   name   当前值对应的name属性
       * @body    console.log("click事件！");
       * @description   click 触发
       */
      this.$emit('click', this.text, this.name);
      
      if (!this.checkable) return
      const checked = !this.isChecked
      this.isChecked = checked
      this.$emit("update:checked", checked)
      /**
       * #event
       *
       * @name    change
       * @param   checked  当前选中的值
       * @param   text   当前值传入的text文本
       * @param   name   当前传入的props中的name
       * @body
       * @description   选中状态发生变化时触发，只有设置checkable属性才会生效。点击时才会触发
       */
      this.$emit('change', checked, this.text, this.name)
    }
  }
}
export default module
